<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-bottom: 800px;
        }
        .swiper-slide{
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-size: 30px;
        }
        .swiper-slide.slide1{
            background-color: burlywood;
        }
        .swiper-slide.slide2{
            background-color: greenyellow;
        }
        .swiper-slide.slide3{
            background-color: royalblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <h4>展示型的实例属性</h4>
            <!--
                vm.$el：描述当前Vue实例使用的根容器记录的vue操作元素元素。
                vm.$data：描述当前Vue实例观察的被代理被拦截的响应式数据组成展示对象【data】。
                vm.$options：构建当前 Vue 应用的初始化选项【自定义配置和默认配置】。
            -->
            <input type="button" value="$el" @click="printEl()">
            <input type="button" value="$data" @click="printData()">
            <input type="button" value="$options" @click="printOptions()">
            <hr>
            <h4>应用型实例方法和属性</h4>
            <!-- 
                vm.$refs：返回一个对象，记录当前Vue实例模板中，定义了ref属性的所有 DOM 元素。
                vm.$nextTick：等同于nextTick ，将执行函数体延迟到页面DOM更新完成后执行
                vm.$forceUpdate()：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
            -->
            <h5>vm.$refs</h5>
            <p>vue不建议使用css选择器在vue方法中操作对应的HTML元素【有可能会导致元素丢失】</p>
            <p>vm.$refs:为当前vue实例记录在容器中定义了 ref 属性的DOM元素；以对象方式提供</p>
            <div class="swiper-container" ref="loop1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slide1">slider1</div>
                    <div class="swiper-slide slide2">slider2</div>
                    <div class="swiper-slide slide3">slider3</div>
                </div>
            </div>
            <input type="button" value="initSwiper" @click="initSwiper1()">
            <div class="swiper-container" ref="loop2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide slide1">slider1</div>
                    <div class="swiper-slide slide2">slider2</div>
                    <div class="swiper-slide slide3">slider3</div>
                </div>
            </div>
            <input type="button" value="initSwiper" @click="initSwiper2()">
            <hr>
            <h5>vm.$nextTick 功能等效于 nextTick </h5>
            <p>等待下一次 DOM 更新刷新的工具方法=>将定义的操作功能延迟到对应DOM更新后执行</p>
            <!-- $nextTick 函数是通过在同一个逻辑中，通过定义于该方法上面的仓库变量寻找对应的DOM元素 -->
            <div class="swiper-container" ref="loop3">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"
                        v-for=" item in loops"
                        :class=" item "
                    >{{ item }}</div>
                </div>
            </div>
            <input type="button" value="initSwiper" @click="initSwiper3()">
        </div>
        <br>
        <p ref="pDom">{{ info }}</p>
        <input type="button" value="setInfo()" @click="setInfo()">
        <hr>
        <h5>vm.$forceUpdate() 迫使页面更新</h5>
        <p>该方法在vue2中是可以用于解决响应式丢失的问题，该方法被vue3保留，可以部分展示型项目中优化渲染性能的</p>
        <ul>
            <li v-for="item in $products">商品:{{ item }}</li>
        </ul>
        <input type="button" value="刷新数据" @click="restProducts()">
    </div>
    <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
    <script src="../assets/swiper/js/swiper.min.js"></script>
    <script type="module">
        import { createApp,nextTick } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    msg: "消息",
                    loops:[],
                    info:"info"
                }
            },
            computed: {
                getMsg() {
                    return this.msg
                }
            },
            methods: {
                printEl() {
                    console.log("$el:", this.$el)
                },
                printData() {
                    console.log("vm:", this)
                    console.log("$data:", this.$data)
                },
                printOptions() {
                    console.log("$options:", this.$options)
                },
                initSwiper1(){
                    console.log( this.$refs )
                    // new Swiper(".swiper-container",{
                    //     loop:true
                    // })
                    new Swiper(this.$refs.loop1,{
                        loop:true
                    })
                },
                initSwiper2(){
                    // new Swiper(".swiper-container",{})
                    new Swiper(this.$refs.loop2,{})
                },
                async initSwiper3(){
                    this.loops = ["slide1","slide2","slide3"];
                    // 上述赋值操作只是完成了数据仓库的变量修改，但并不保证页面已经渲染完成
                    // 此时直接执行需要由元素决定的 轮播图功能时，因为无法加载最新的轮播元素数量，所以导致轮播图出现问题
                    await this.$nextTick()
                    new Swiper(this.$refs.loop3,{})
                },
                setInfo(){
                    console.log("赋值前：",this.info,this.$refs.pDom.textContent)
                    this.info = Math.random();
                    console.log("赋值后：",this.info,this.$refs.pDom.textContent)
                    // setTimeout(()=>{
                    //     console.log("赋值后-延迟：",this.info,this.$refs.pDom.textContent)
                    // },5)
                    // this.$nextTick(()=>{
                    //     console.log("赋值后-延迟：",this.info,this.$refs.pDom.textContent)
                    // })
                    // this.$nextTick()
                    //     .then(()=>{
                    //         console.log("赋值后-延迟：",this.info,this.$refs.pDom.textContent)
                    //     })
                    // nextTick(()=>{
                    //     console.log("赋值后-延迟：",this.info,this.$refs.pDom.textContent)
                    // })
                    nextTick()
                        .then(()=>{
                            console.log("赋值后-延迟：",this.info,this.$refs.pDom.textContent)
                        })
                },
                restProducts(){
                    this.$products = [
                        "产品1111",
                        "产品2222",
                        "产品3333",
                        "产品4444"
                    ]
                    console.log(this)
                    // 不到最后的性能优化不要使用
                    this.$forceUpdate()
                }
            },
            // 在vue应用构建时会自动执行的一个方法
            created(){
                // console.log("created")
                // 在vue应用构建时自动完成一个实例属性$products的记录
                console.log(this)
                this.$products = [
                    "产品1",
                    "产品2",
                    "产品3",
                    "产品4"
                ]
            }
        }).mount("#app")
    </script>
</body>

</html>